<template>
	<div class="login_container">
		<div class="login_box">
			<!-- 头像区域 -->
			<div class="avatar_box">
				<img src="../assets/logo.png" alt="">
			</div>
			<!-- 登录表单区域  loginFormRef就是表单的实例(引用)对象-->
			<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
				<!-- 用户名 -->
			  <el-form-item prop="username">
					<!-- 用户图标我用Elemnt UI有的图标 -->
			    <el-input v-model="loginForm.username" placeholder="请输入账户"
    prefix-icon="el-icon-user"></el-input>
			  </el-form-item>
			  <!-- 密码 -->
			  <el-form-item prop="password">
				  <!-- 密码图标采用阿里巴巴的图标fonts -->
			    <el-input v-model="loginForm.password" placeholder="请输入密码"
    prefix-icon="iconfont icon-3702mima" type="password"></el-input>
			  </el-form-item>
			  <!-- 按钮区 -->
			  <el-form-item class="btns">
			    <el-button type="primary" @click="login" round>登录</el-button>
				<el-button type="info" @click="resetForm" round>重置</el-button>
			  </el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				// 这是登录表单的数据绑定对象
				loginForm : {
					username: 'admin',
					password: '123456'
				},
				// 这是表单的验证规则对象
				loginFormRules:{
					// 验证用户名是否合法
					username:[
						// required 必须要填的选项  msg:提示信息  trigger 离开焦点触发
						{ required: true, message: '请输入您的账户', trigger: 'blur' },
						{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
					],
					// 验证密码是否合法
					password:[
						{ required: true, message: '请输入登录密码', trigger: 'blur' },
						{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
					]
				}
			}
		},
		methods:{
			// 重置表单的函数
			resetForm(){
				// this指的是 login.vue这个实例对象
				// console.log(this)
				// $refs自带的 loginFormRef 实例对象  resetFields：Elemnt ui提供的方法
				this.$refs.loginFormRef.resetFields();
			},
			login(){
				// => 匿名函数 类似于回调函数
				this.$refs.loginFormRef.validate(async valid => {
					// console.log(valid);
					//  如果valid为false 直接return 不发起请求
					if (!valid) return; 
					const {data:res} = await this.$http.post('login',this.loginForm)
					// 如果打印出的是promise的数据 就用await async转化成data数据
					// console.log(res);
					// if (res.meta.status !== 401) {
					// 	// 返回登录页面
					// };
					if (res.meta.status == 200) {
						// $message在 element.js页面中
						this.$message.success("登录成功");
						// 1.将登录成功之后的token, 保存到客户端的sessionStorage 中
						// 1.1项目中出了登录之外的其他API接口，必须在登录之后才能访问
						// 1.2 token 只应在当前网站打开期间生效，所以将token 保存在sess ionStorage中
						// 2.通过编程式导航跳转到后台主页，路由地址是/home
						window.sessionStorage.setItem('token',res.data.token);
						// console.log(res);
						// 通过编程式导航跳转到后台页面
						this.$router.push('/home');
					} else{
						this.$message.error("登录失败");
						
					}
				});
			}
		}
	}
</script>

<style Lang="less" scoped="scoped">
/* 头像区域的CSS */

.login_container {
	background-color: #2b4b6b;
	height: 100%;
	color: #fff;
}
.login_box {
	width: 450px;
	height: 300px;
	background-color: #fff;
	border-radius: 3px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50% , -50%); /*配合定位 设置 X y 轴 从而达到垂直水平居中 */
		
}
.avatar_box{ 
	height: 130px;
	width: 130px;
	border: 1px solid #eee;
	border-radius: 50%;
	padding: 10px;
	box-shadow: 0 0 10px #ddd; /* 盒子阴影*/
	position: absolute;
	left: 50%;
	transform: translate(-50% , -50%); 
	background-color: #fff;
}
img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #eee;
}
/* 登录表单区域的CSS */
.login_form {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box; /*取消padding margin撑大*/
}
.btns {
	display: flex; /*弹性布局*/
	justify-content: flex-end; /*尾部对齐*/
}

</style>

